<template> 
	<view>
		<view v-if="item.image">
			<image @click="showImage" class="adv" mode="widthFix" :src="item.image" v-for="(item,index) in bannerArr"></image>
		</view>
		<view class="tab">
			<block v-for="(item,index) in tabs">
				<view class="tab-item">
					<view @click="tabChange" :data-index="index" class="tab-name" :class="index == tabIndex ? 'item-active' : ''">{{item.name}}</view>
				</view>
			</block>
		</view>
		<view class="video-list">
			<block v-for="(item,index) in rooms">
				<view class="video-2">
					<view :data-roomid="item.roomid" :data-id="item.id" :data-type="item.type" @click="toLive">
						<view :class="item.live_status==101 ? 'zhiboBox1' :'zhiboBox'"> 
							<view  class="container"  v-if="item.live_status==101"> 
								<text class="first-child"></text>
								<text class="nth-child1"></text>
								<text class="nth-child2"></text>
							</view>
							<view class="liveText" v-if="item.live_status==101">直播中</view>
							<view class="liveText" v-if="item.live_status==102">未开始</view>
							<view class="liveText" v-if="item.live_status==103">已结束</view>
						</view>
						<view class="cover">
							<image mode="widthFix" :src="item.share_img"></image>
						</view>
						<view class="video-name">{{item.name}} </view>
						<view class="video-description" v-if="item.type == 'live'">开播时间：{{item.start_time | time}}</view>
						<view class="video-description" v-else-if="item.type == 'url'">上传时间：{{item.created_at | time}}</view>
					</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import {
		Video
	} from '@/model/video.js';
	var video = new Video();
	import {
		Adv
	} from '@/model/adv.js';
	var adv = new Adv();
	import moment from '@/utils/moment';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				tabs: [{
						name: '直播中',
						status: 101
					},
					{
						name: '待直播',
						status: 102
					},
					{
						name: '已结束',
						status: 103
					}
				],
				tabIndex: 0,
				page: 1,
				rooms: [],
				bannerArr: [],
				loadStatus: 'more',
				cate_id: ''
			}
		},
		onLoad(options) {
			this.cate_id = options.cate_id ? options.cate_id : '';
			this.banner();
			this.videoList();
		},
		onPullDownRefresh() {

		},
		filters: {
			// 时间格式化
			time(val) {
				return moment(val * 1000).format('MM-DD HH:mm');
			},
		},
		methods: {
			banner: function() {
				var that = this;
				//获得bannar信息
				var params = {
					'num': 1,
					'key': 'zhibo_list'
				};
				adv.list(params, (data) => {
					that.$data.bannerArr = data.items;
				});
			},
			videoList: function() {
				var that = this;
				var params = {
					page: this.$data.page,
					live_status: this.$data.tabs[this.$data.tabIndex].status,
					cate_id: this.cate_id
				}
				if (this.$data.onLoading) {
					return false;
				}
				that.$data.onLoading = true;
				that.$data.loadStatus = "loading";
				video.list(params, (data) => {
					that.$data.onLoading = false;
					var items = data.items;
					items = this.$data.rooms.concat(items);
					that.$data.rooms = items;
					if (that.$data.page >= data._meta.pageCount) {
						that.$data.loadStatus = "noMore";
					} else {
						that.$data.loadStatus = "more";
					}
				})
			},
			tabChange: function(e) {
				if (this.$data.onLoading) {
					return false;
				}
				var index = e.currentTarget.dataset.index;
				this.$data.tabIndex = index
				this.reset();
				this.videoList();
			}, 
			reset: function() { 
				this.$data.page = 1;
				this.$data.rooms = [];
			},
			toLive: function(e) {
				let roomId = this.getDataSet(e, 'roomid');
				let type = this.getDataSet(e, 'type');
				let id = this.getDataSet(e, 'id');
				if (type == 'live') {
					if (!this.check()) {
						return false;
					}
					let customParams = encodeURIComponent(JSON.stringify({}))
					var url =
						`plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`;
					wx.navigateTo({
						url: url
					})
				} else if (type == 'url') {
					var url = "/pages/video/detail?id=" + id;
					this.goto(url);
				}
			},
			check:function(){
				var user = uni.getStorageSync('user');
				var that = this;
				if(!user.member){
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success(res) {
							if (res.confirm) {
								that.goto("/pages/public/logintype");
							} else if (res.cancel) {
								return false;
							}
						}
					})
					return false
				}
				return true;
			},
			/**
			 * 页面上拉触底事件的处理函数
			 */
			onReachBottom: function() {
				if (this.$data.loadStatus == 'noMore') {
					return false;
				}
				this.$data.page++;
				this.videoList();
			},
			showImage: function() {
				var that = this;
				var images = [];
				that.$data.bannerArr.forEach((item) => {
					images.push(item.image);
				})
				// 预览图片
				uni.previewImage({
					urls: images,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {

						},
						fail: function(err) {

						}
					}
				});
			}
		}

	}
</script>

<style lang="scss">
	.adv {
		width: 100%;
	}

	page {
		background-color: #fff;
	}

	.swiper {
		min-height: 360rpx;
	}

	.center {
		margin: 0 auto;
	}

	.slide-image {
		width: 100%;
	}

	.tab {
		display: flex;
		margin: 20rpx 0 20rpx 0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
	}

	.tab-name {
		width: 100rpx;
		margin: 0 auto;
		padding: 20rpx 0;
		color: #666;
	}

	.item-active {
		border-bottom: 4rpx solid #ff4400;
		color: #ff4400;
	}

	.video-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 3%;
		margin-top: 40rpx;
	}

	.video-2 {
		width: 49%;
		margin-bottom: 50rpx;
	}

	.video-2:nth-child(odd) {
		margin-right: 2%;
	}
	.cover{
		height: 300rpx;
		overflow: hidden;
		border-radius: 25rpx;
	}

	.video-2 .cover image {
		width: 100%;
		height: 100%;
	}

	.video-name {
		color: #111;
		padding-left: 20rpx;
		font-size: 32rpx;
		line-height: 38rpx;
		max-height: 76rpx;
		overflow: hidden;
		margin-top: 10rpx;
	}

	.video-description {
		color: #999;
		padding-left: 20rpx;
		font-size: 28rpx;
		margin-top: 10rpx;
		line-height: 36rpx;
		max-height: 72rpx;
		overflow: hidden;
	}

	.video {
		height: 100%;
	}

	/*分类*/
	.video-category {
		display: flex;
		justify-content: space-between;
		padding: 0 4%;
		width: 100;
		flex-wrap: wrap;
	}

	.video-category-item {
		background-color: #FF6600;
		color: #fff;
		width: 48%;
		text-align: center;
		padding: 50rpx 0;
		border-radius: 15rpx;
		margin-top: 20rpx;
	}

	/* 音频波效果 */
	.container {
		// position: absolute;
		width: 40rpx;
		height: 40rpx;
		border-radius: 40rpx;
		background-color: #ff6600;
		overflow: hidden;
		margin-left: -12rpx;
	}
	.container1 {
		// position: absolute;
		width: 40rpx;
		height: 40rpx;
		border-radius: 40rpx;
		background-color: #ff6600;
		overflow: hidden;
		margin-right: 10rpx;
	}
	.zhiboBox{
	    background: rgba(0, 0, 0, 0.2);
	    height: 40rpx;
	    position: absolute;
	    // width: 160rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		padding: 0 10rpx;
	}
	.zhiboBox1{
	    background: rgba(0, 0, 0, 0.2);
	    height: 40rpx;
	    position: absolute;
	    // width: 160rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: flex-start;
		padding: 0 10rpx;
	}
	.liveText{
		// position: absolute;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx; 
		overflow: hidden;
		// margin: 0px 0rpx 0 50rpx;
		color: #FFFFFF;
		font-weight: bold;
	}

	.container text {
		width: 3px;
		height: 2px;
		bottom: 4px;
		position: absolute;
		background: #FFFFFF;
		animation: bodong 0.5s linear infinite ease;
		-webkit-animation: bodong 0.5s infinite ease;
		z-index: 99999;
		// margin-left: 3px;
		border-top-left-radius: 5rpx;
		border-top-right-radius: 5rpx;
	}
	
	.container  .first-child {
		left: 3px;
		animation-delay: .3s;
		
	}
	.container  .nth-child1 {
		left: 8px;
		animation-delay: .4s;
		

	}

	.container  .nth-child2 {
		left: 13px;
		animation-delay: .6s;
		
	}

	.container  .nth-child3 {
		left: 21px;
		
	}

	.container .nth-child4 {
		left: 28px;
		animation-delay: 1s;
		
	}

	@-webkit-keyframes bodong {
		0% {
			height: 3px;
			background: bule;
		}

		30% {
			height: 8px;
			background: bule;
		}

		60% {
			height: 12px;
			background: bule;
		}

		80% {
			height: 8px;
			background: bule;
		}

		100% {
			height: 3px;
			background: bule;
		}
	}
</style>
